<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .chart {
            margin: 0 auto;
            width: 960px;
            min-height: 8px;
            height: 100%;
            box-shadow: 0 0 3px 1px #eee;
        }

        svg {
            vertical-align: top;
            width: 100%;
            height: 100%;
        }

        .tooltip {
            position: absolute;
        }

        .axis {
            height: 20px;
        }

        .zoom {
            cursor: move;
            position: absolute;
            top: 0;
            left: 0;
            fill: none;
            pointer-events: all;
        }
    </style>
</head>

<body>
    <div class="chart"></div>
    <script>
        (function () {
            var i, j;
            window.VEHICLES = [];

            for (i = j = 1; j <= 15; i = ++j) {
                VEHICLES.push({
                    tir: i,
                    start: new Date(+(new Date()) - Math.floor(Math.random() * 1000000000)),
                    end: new Date()
                });
            }
        }).call(this);

        var allCharts, catchAll, chart, globalX, height, maxX, minX, parser, spanW, spanX, symbols, tooltip, width, wrapper, x, xAxis;
        let zh = d3.timeFormatDefaultLocale({
            decimal: ".",
            thousands: ",",
            grouping: [3],
            currency: ["¥", ""],
            dateTime: "%a %b %e %X %Y",
            date: "%Y/%-m/%-d",
            time: "%H:%M:%S",
            periods: ["上午", "下午"],
            days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
            shortDays: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
            months: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            shortMonths: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
        });
        var formatTime = d3.timeFormat("%Y-%b-%d %H:%M:%S");

        wrapper = document.querySelector('.chart');

        width = wrapper.clientWidth;
        height = wrapper.getBoundingClientRect().bottom;

        parser = d3.isoParse;

        minX = d3.min(VEHICLES, function (d) {
            return parser(d.start);
        });

        maxX = d3.max(VEHICLES, function (d) {
            return parser(d.end);
        });

        x = d3.scaleTime().domain([minX, maxX]).rangeRound([0, width]);

        xAxis = d3.axisBottom(x)

        //控制层
        globalX = d3.select(wrapper).append('svg')
                    .attr('class', 'axis')
                    .call(xAxis);

        catchAll = globalX.append('g')
            .attr('class', 'zoom')
            .append('rect')
            .attr('fill', 'none')
            .attr('width', width)
            .attr('height', height);

        catchAll.call(d3.zoom().scaleExtent([0.1, 10]).on("zoom", function () {
            var transform;
            transform = d3.event.transform;
            var xscale = xAxis.scale(transform.rescaleX(x))
            globalX.call(xscale);
        }));

    </script>
</body>
